<template>
  <ul class="container">
    <li 
      class="item"
      v-for="item in list"
      @click="gotoDetail(item.id)"
    >
      <div>
        <img :src="item.img | wh('192.270')" alt="">
      </div>
      <div>
        <h3>{{item.nm}} <span class="version" :class="item.ver | ver"></span></h3>
        <h4>
          {{item.cat}}
          <template v-if="item.wish">
            <span class="wish">{{item.wish}}</span>
            想看
          </template>
        </h4>
        <h5>{{item.desc || (item.star && '主演：' + item.star)}}</h5>
        <h6>{{item.showInfo || '上映时间未定'}}</h6>
      </div>
      <div>
        <span>
          <template v-if="item.sc">
            <b>{{item.sc}}</b><i>分</i>
          </template>
        </span>
        <MButton :showst="item.showst"></MButton>
      </div>
    </li>
  </ul>
</template>

<script>
import MButton from '@/components/movies/m-button'
export default {
  props: ['list'],
  components: {
    MButton
  },
  methods: {
    gotoDetail(id) {
      this.$router.push({
        path: '/details',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/stylus/border.styl'
@import '~@/assets/stylus/ellipsis.styl'
.container
  padding-left .1rem
  .item
    display flex
    padding .1rem .1rem .1rem 0
    border_1px(0 0 1px 0)
    > div:first-child
      width .75rem
      img
        width .65rem

    > div:nth-child(2)
      flex 1
      h3
        font-size .18rem
      h4,h5,h6
        color #666
        font-weight normal
        .wish
          color #f4b741
      h5
        ellipsis(100%)
      h6
        color #999
    > div:last-child
      width .7rem
      display flex
      flex-direction column
      > span
        display flex
        flex 1
        &:first-child
          align-items center
          justify-content center
          color #f4b741
          b
            display flex
            font-size .18rem
            margin-top -0.04rem

        &:last-child
          justify-content center
          align-items flex-start

.version {
  background-size: contain;
  background-repeat: no-repeat;
  height: 14px;
  width: 17px;
  display: inline-block;
  margin-top: 5px;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  margin-right: 3px
}

.version.v2d.imax {
  width: 43px;
  background-image: url('')
}

.version.v2d.imax+div.title {
  max-width: calc(100% - 43px)
}

.version.v3d {
  background-image: url('')
}

.version.v3d.imax {
  width: 43px;
  background-image: url('')
}

.version.v3d.imax+div.title {
  max-width: calc(100% - 43px)
}
</style>